<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>叠加本地设备缓存</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>
<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onAddCacheData()">1.开启缓存</button>
    <br><br>
    <button onclick="onCacheAdd()">2.缓存-新增设备</button>
    <button onclick="onCacheUpdate()">3.缓存-更新设备</button>
    <button onclick="onCacheRemove()">4.缓存-移除设备</button>
    <br><br>
    <button onclick="onRemoveCacheData()">5.关闭缓存</button>
    <br><br>
    <div class="opt_intro">
        按照按钮编号依次点击，查看效果
    </div>
</div>
</body>

</html>

<script>
    //示例说明：
    //该示例展示了本地缓存的功能
    //适用场景是需要将用户数据与电网网架数据进行融合（本地数据优先，对电网网架数据进行覆盖）

    //自定义示例参数
    mapOptions = {
        zoom: 20,
        center: [118.1598248101734, 24.474913496383763]
    }
    // layers = ['301000']
    //示例功能代码

    //创建缓存对象
    var devCache = null

    //缓存增删改标志位
    var isCacheAdded = false
    var isCacheUpdated = false
    var isCacheRemoved = false

    //添加缓存(新增设备到电网)
    function onCacheAdd() {
        if (!devCache || isCacheAdded) {
            return
        }
        devCache.setAddDevs([
            new egisV2.symbol.ElePointSymbol({
                convertSize: true,
                devId: '487993',//oid，psrid
                devTypeId: '300000',//设备类型
                symbolId: "4020290",//符号ID
                symbolRotate: 45,//旋转角度
                symbolSize: 20,//大小
                symbolColor: '#ff0000',//颜色
                symbolOpacity: 1,//透明度
                symbolScalable: true,//缩放
                // coordinates:[107.6022216796875, 34.09389476570907],
                coordinates: [118.16010794900138, 24.475027681375988],//坐标
                attributes: {a: 1, b: 2, sbzlx: 'xxxxxx'}//其它信息
            }),
            new egisV2.symbol.EleLineSymbol(
                {
                    devId: 'b20001',//oid，psrid
                    devTypeId: '35421985',//设备类型
                    symbolId: '420',//符号ID
                    symbolWidth: 5,//线宽
                    symbolColor: '#0000ff',//颜色
                    symbolOpacity: 1,//透明度
                    coordinates: [[[118.15981751453342, 24.474934791140157], [118.15970121728799, 24.474927952931083]]],//坐标[全部都按多线处理（三维数组）]
                    attributes: {c: 3, d: 4}//其它属性
                }
            )
        ])
        if (gridLayer) {
            gridLayer.refresh()
        }
    }

    //更新缓存(覆盖电网设备)
    function onCacheUpdate() {
        if (!devCache || isCacheUpdated) {
            return
        }
        devCache.setUpdateDevs([
            new egisV2.symbol.ElePointSymbol({
                convertSize: true,
                devId: '465',//oid，psrid


                devTypeId: '301000',//设备类型
                symbolId: "3040010",//符号ID

                // devTypeId: '301000',//设备类型
                // symbolId: "4020290",//符号ID
                symbolRotate: -270,//旋转角度
                symbolSize: 0.5,//大小
                symbolColor: '#ff0000',//颜色
                symbolOpacity: 1,//透明度
                symbolScalable: true,//缩放
                coordinates: [118.15996794900138, 24.475027681375988],//坐标
                attributes: {a: 3, b: 4}//其它信息
            })
        ])
        if (gridLayer) {
            gridLayer.refresh()
        }
    }

    //移除电网设备（标记移除，电网不显示在这里被标记删除的设备）
    function onCacheRemove() {
        if (!devCache || isCacheRemoved) {
            return
        }
        devCache.setRemoveDevs([
            new egisV2.symbol.ElePointSymbol({
                convertSize: true,
                devId: '20895',//oid，psrid
                devTypeId: '301000',//设备类型
                // symbolId: "4020250",//符号ID
                // symbolRotate: -270,//旋转角度
                // symbolSize: 0.5,//大小
                // symbolColor: '#ff0000',//颜色
                // symbolOpacity: 1,//透明度
                // symbolScalable: true,//缩放
                coordinates: [118.15986794900138, 24.474927681375988],//坐标
                attributes: {a: 5, b: 6}//其它信息
            })
        ])
        if (gridLayer) {
            gridLayer.refresh()
        }
    }

    //为电网添加本地缓存
    function onAddCacheData() {
        devCache.clearCache()
        gridLayer.setDevCache(devCache)
    }

    //从电网移除本地缓存
    function onRemoveCacheData() {
        isCacheAdded = false
        isCacheUpdated = false
        isCacheRemoved = false
        gridLayer.setDevCache(null)
    }

    function initPage() {
        devCache = new egisV2.support.DevCache()
        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()
    }

    window.onload = function () {

        loadGeoMap_ms(initPage)
    }


</script>
